<template>
  <div class="curse-list">
    <slot name="customize">
      <div v-for="(item,index) in curseList" :key="index" class="flex mb-4 border-b pb-4">
        <img src="../assets/image/u31.jpg" alt="" srcset="" class="w-[150px]" v-if="showImg"/>
        <slot>
          <div class="ml-5">
            <span class="font-bold">{{item.name}}</span>
            <div class="my-2 text-red-600">已学{{item.progress}}%</div>
            <div class="text-gray-600">
              <span>笔记：{{item.notes}}</span>
              <span class="mx-5">答疑：{{item.answer}}</span>
              <span>评价：{{item.evaluation}}</span>
            </div>
          </div>
          <div class="ml-auto mt-auto">
            <el-button type="primary" round size="mini">{{item.studyTime>0?'继续学习':'开始学习'}}</el-button>
          </div>
        </slot>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    showImg: {
      type: Boolean,
      default: true
    },
    curseList: {
      type: Array,
      default: ()=>[]
    },
  },
}
</script>

<style lang="scss" scoped>
.curse-list {

}
</style>